<template>
  <div @click.exact="clearSelect()">
    <div class="pan-main-breadcrumb-content">
      <el-breadcrumb style="display: inline-block">
        <el-breadcrumb-item>
          <router-link class="breadcrumb-item-a" to="/files">返回</router-link>
        </el-breadcrumb-item>
      </el-breadcrumb>
      <el-divider direction="vertical" style="vertical-align: top !important" />
      <el-breadcrumb
        separator-class="el-icon-arrow-right"
        style="display: inline-block"
      >
        <el-breadcrumb-item>
          <a class="breadcrumb-item-a" href="#">回收站</a>
        </el-breadcrumb-item>
      </el-breadcrumb>
      <div style="margin-left: auto; display: flex; align-items: center">
        <el-button
          type="success"
          size="mini"
          round
          @click="restoreRecycle"
          :disabled="multipleSelection.length === 0"
        >
          还原<i class="el-icon-refresh-left el-icon--right" />
        </el-button>
        <el-button
          type="danger"
          size="mini"
          round
          @click="cleanRecycle"
          :disabled="tableData.length === 0"
        >
          清空回收站<i class="el-icon-delete el-icon--right" />
        </el-button>
      </div>
    </div>

    <div :class="'file-list1 table'" v-if="tableData.length > 0">
      <div class="item">
        <div :class="'file-item'">
          <div class="check">
            <el-checkbox v-model="checkAll"></el-checkbox>
          </div>
          <div class="name">名称</div>
          <div class="size">大小</div>
          <div class="time">删除时间</div>
        </div>
      </div>
    </div>
    <el-scrollbar
      class="scrollbar"
      style="height: calc(100vh - 45px - 63px)"
      v-if="tableData.length > 0"
    >
      <div :class="'file-list table'">
        <div
          class="item"
          v-for="(item, index) in tableData"
          :key="item.fileId"
          :data-id="index"
          @click.exact.stop="selectItem(item)"
          @contextmenu.prevent.stop="itemRightMenu($event, item, index)"
        >
          <div :class="'file-item item' + index">
            <div class="check">
              <el-checkbox :value="getListIndex(item) >= 0"></el-checkbox>
            </div>

            <div class="icon">
              <svg class="svgicon" aria-hidden="true">
                <use
                  :xlink:href="'#icon-' + getFileFontElement(item.fileType)"
                ></use>
              </svg>
            </div>
            <div class="name">
              {{ item.filename }}
            </div>

            <div class="size">
              {{ item.fileSizeDesc }}
            </div>
            <div class="time">
              {{ item.updateTime }}
            </div>
          </div>
        </div>
      </div>
    </el-scrollbar>
    <div class="empty" v-else>
      <div>
        <div class="icon">
          <i class="iconfont icon-empty"></i>
        </div>
        <div class="title">您的回收站为空噢～</div>
      </div>
    </div>
    <div
      class="right-menu"
      v-if="contextMenuVisible"
      :style="`left: ${rightMenuConfig.left}px; top:${rightMenuConfig.top}px;`"
    >
      <a href="javascript:;" @click="restoreRecycle">
        <i class="el-icon-refresh-left"></i>还<span style="visibility: hidden"
          >下</span
        >原
      </a>
      <a href="javascript:;" @click="deleteOneRecycleFile">
        <i class="el-icon-delete"></i>彻底删除
      </a>
      <a
        href="javascript:;"
        @click="
          loadTableData()
          contextMenuVisible = false
        "
      >
        <i class="el-icon-refresh"></i>刷<span style="visibility: hidden"
          >下</span
        >新
      </a>
    </div>
  </div>
</template>

<script>
import recycleService from '../../../api/recycle'
import panUtil from '../../../utils/common'
import { mapMutations, mapGetters, mapActions } from 'vuex'

export default {
  name: 'Recycle',
  components: {},
  props: {},
  data() {
    return {
      tableData: [],
      tableHeight: window.innerHeight - 200,
      multipleSelection: [],
      tableLoading: true,
      checkAll: false,
      contextMenuVisible: false,
      rightMenuConfig: {
        left: 0,
        top: 0,
        type: null,
      },
    }
  },
  methods: {
    ...mapMutations({
      setSearchFlag: 'file/setSearchFlag',
    }),
    init() {
      this.setSearchFlag(false)
      this.loadTableData()
    },
    getListIndex(item) {
      return this.multipleSelection.findIndex(function (val) {
        return val.fileId === item.fileId
      })
    },
    clearSelect() {
      this.multipleSelection = []
      this.contextMenuVisible = false
    },
    selectItem(item) {
      this.contextMenuVisible = false
      let selectList = JSON.parse(JSON.stringify(this.multipleSelection))
      const index = selectList.findIndex((val) => {
        return val.fileId === item.fileId
      })
      if (index >= 0) {
        selectList.splice(index, 1)
      } else {
        selectList.push(item)
      }
      this.multipleSelection = selectList
    },
    cleanRecycle() {
      let _this = this
      if (_this.tableData && _this.tableData.length > 0) {
        let fileIdArr = new Array()
        _this.tableData.forEach((item) => {
          fileIdArr.push(item.fileId)
        })
        _this.doDeleteRecycle(fileIdArr.join('__,__'))
        _this.checkAll = false
      }
    },
    itemRightMenu(event, item, index) {
      event.stopPropagation()
      // console.log(event.clientX, event.clientY)
      this.rightMenuConfig.left = event.clientX
      this.rightMenuConfig.top = event.clientY
      this.rightMenuConfig.type = 'item'
      this.$nextTick(() => {
        this.contextMenuVisible = true
        let selectList = JSON.parse(JSON.stringify(this.multipleSelection))
        const index = selectList.findIndex((val) => {
          return val.fileId === item.fileId
        })
        if (index >= 0) {
        } else {
          this.handleSelectionChange([item])
        }
      })
    },
    doDeleteRecycle(fileIds) {
      let _this = this
      _this
        .$confirm('文件删除后将不可恢复，您确定这样做吗？', '删除文件', {
          confirmButtonText: '删除',
          cancelButtonText: '取消',
          type: 'warning',
        })
        .then(() => {
          recycleService.deleteRecycle(
            {
              fileIds: fileIds,
              userName: _this.username,
            },
            (res) => {
              _this.$message.success(`删除成功!${res.message}K`)
              _this.loadTableData()
            },
            (res) => {
              _this.$message.error(res.message)
            }
          )
        })
    },
    handleSelectionChange(multipleSelection) {
      this.multipleSelection = multipleSelection
    },
    showOperation(row, column, cell, event) {
      panUtil.showOperation(cell)
    },
    hiddenOperation(row, column, cell, event) {
      panUtil.hiddenOperation(cell)
    },
    getFileFontElement(type) {
      return panUtil.getFileFontElement2(type)
    },
    restoreOneRecycleFile(row) {
      this.doRestoreRecycle(row.fileId)
    },
    deleteOneRecycleFile(row) {
      // this.doDeleteRecycle(row.fileId)
      let _this = this
      if (_this.multipleSelection && _this.multipleSelection.length > 0) {
        let fileIdArr = new Array()
        _this.multipleSelection.forEach((item) => {
          fileIdArr.push(item.fileId)
        })
        _this.doDeleteRecycle(fileIdArr.join('__,__'))
        return
      }
    },
    restoreRecycle() {
      let _this = this
      if (_this.multipleSelection && _this.multipleSelection.length > 0) {
        let fileIdArr = new Array()
        _this.multipleSelection.forEach((item) => {
          fileIdArr.push(item.fileId)
        })
        _this.doRestoreRecycle(fileIdArr.join('__,__'))
        return
      }
      _this.$message.error('请选择要还原的文件')
    },
    doRestoreRecycle(fileIds) {
      let _this = this
      recycleService.restoreRecycle(
        {
          fileIds: fileIds,
        },
        (res) => {
          _this.$message.success('文件还原成功')
          // _this.tableData = res.data
          _this.loadTableData()
        },
        (res) => {
          _this.$message.error(res.message)
        }
      )
    },
    loadTableData() {
      let _this = this
      _this.tableLoading = true
      recycleService.recycles(
        (res) => {
          _this.tableLoading = false
          _this.tableData = res.data
        },
        (res) => {
          _this.tableLoading = false
          _this.$message.error(res.message)
        }
      )
    },
  },
  computed: {
    ...mapGetters(['username']),
  },
  mounted() {
    this.init()
  },
  watch: {
    checkAll: {
      handler(val) {
        if (val) {
          this.multipleSelection = JSON.parse(JSON.stringify(this.tableData))
        } else {
          this.clearSelect()
        }
      },
    },
  },
}
</script>

<style lang="scss" scoped>
.pan-main-breadcrumb-content {
  width: 100%;
  padding: 0 25px 0 25px;
  height: 45px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #eee;
  border-top: 1px solid #eee;
}

.breadcrumb-item-a {
  cursor: pointer !important;
  color: #409eff !important;
}
.empty {
  height: calc(100vh - 46px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #ccc;
  .icon {
    margin: 0 auto 20px;
    .iconfont {
      font-size: 60px;
    }
  }
  .title {
    font-size: 18px;
  }
}

.file-list1 {
  display: flex;

  padding: 0 20px 0;

  &.table {
    flex-direction: column;
  }
  .item {
    width: 100%;
  }
  .file-item {
    display: flex;
    padding: 20px;
    border-bottom: 1px solid #eee;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
    &.sortable-ghost {
      display: none;
    }
    .check {
      margin-right: 20px;
    }
    .icon {
      width: 30px;
      text-align: center;
      margin-bottom: 0px;
      font-size: 20px;
      user-select: none;

      i {
        font-size: 20px;
        margin-right: 15px;
      }
      .svgicon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        // overflow: hidden;
        margin-right: 15px;
      }
    }
    .name {
      flex: 1;
      user-select: none;
    }
    .time {
      width: 200px;
      text-align: left;
      user-select: none;
      color: #000;
    }
    .size {
      width: 60px;
    }
  }

  &.list {
    .file-item {
      justify-content: flex-start;
      border-color: #fff;
      &.on {
        border-color: #eee;
      }
    }
  }
}
:deep(.is-horizontal) {
  display: none;
}
:deep(.el-scrollbar__wrap) {
  overflow-x: hidden;
}
.file-list {
  display: flex;
  padding: 0 20px 20px;

  &.table {
    flex-direction: column;
  }
  .file-item {
    display: flex;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
    .el-image {
      display: inherit;
      overflow: visible;
      :deep(img) {
        border: 1px solid #eee;
      }
    }
    &.sortable-ghost {
      display: none;
    }
    &:hover {
      background-color: #f7f7f7;
    }
    .check {
      margin-right: 20px;
      pointer-events: none;
      position: relative;
      &::after {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        display: block;
        left: 0;
        top: 0;
      }
    }
    .icon {
      width: 30px;
      text-align: center;
      margin-bottom: 0px;
      margin-right: 10px;
      font-size: 20px;
      user-select: none;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      i {
        font-size: 20px;
        margin-right: 15px;
      }

      .svgicon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        // overflow: hidden;
        // margin-right: 15px;
      }
    }
    .name {
      flex: 1;
      user-select: none;
    }
    .time {
      width: 200px;
      text-align: left;
      user-select: none;
      color: #000;
    }
    .size {
      width: 60px;
    }
  }
}
.right-menu {
  position: fixed;
  background: #fff;
  border-radius: 5px;
  overflow: hidden;
  z-index: 999;
  border: 1px solid #eee;
  box-shadow: 0 0.5em 1em 0 rgba(0, 0, 0, 0.1);
  :deep(div) {
    display: block;
    margin-right: 0px;
  }
  a,
  :deep(a) {
    min-width: 100px;
    height: 3em;
    line-height: 3em;
    font-size: 13px;

    display: block;
    color: #1a1a1a;
    text-decoration: none;
    padding: 0 10px;
    &.red {
      color: #f78989;
    }

    &:hover {
      background: #65c6cf;
      color: #fff;
    }

    i {
      margin-right: 10px;
    }
  }
}
</style>
